<template>
  <!-- FBA确认发货 -->
  <a-modal :width="1200" v-model:visible="showFbaShipment" title="确认发货" top="8vh" title-align="start" :on-before-ok="submitData" :ok-loading="submitLoading" :mask-closable="false" @cancel="closedDialog">
    <div class="table-title" style="margin-bottom: 10px">
      <span>注意：缺少跟踪号的发货单无法确认发货</span>
    </div>
    <a-table
      class="table-two-line"
      ref="tableRef"
      row-key="id"
      :data="fbaOrders"
      :scroll="{
        y: 'calc(84vh - 200px)',
        x: '100%',
      }"
      size="mini"
      :pagination="false"
      :bordered="{ headerCell: true }"
    >
      <template #columns>
        <a-table-column data-index="sort" title="序号" :width="45" fixed="left">
          <template #cell="{ rowIndex }">
            <p>{{ rowIndex + 1 }}</p>
          </template>
        </a-table-column>
        <a-table-column title="店铺" :width="100" fixed="left">
          <template #cell="{ record }">
            <TextLimit>{{ record.shopName }}</TextLimit>
          </template>
        </a-table-column>
        <a-table-column title="发货单号/货件号" :width="120" fixed="left">
          <template #cell="{ record }">
            <p>{{ record.billNo }}</p>
            <p>{{ record.shipmentId || '-' }}</p>
          </template>
        </a-table-column>
        <a-table-column data-index="warehouseName" title="发货仓" :width="100" />
        <a-table-column data-index="centerId" title="CenterId" :width="80" />
        <a-table-column title="国家" :width="80">
          <template #cell="{ record }">
            <p>{{ $extract(marketPlaceList[record.marketplaceId], 'name') }}-{{ $extract(marketPlaceList[record.marketplaceId], 'code') }}</p>
          </template>
        </a-table-column>
        <a-table-column title="省州/城市" :width="100">
          <template #cell="{ record }">
            <p>{{ $extract(record, 'shipToAddress.stateOrProvinceCode') || '--' }}</p>
            <p>{{ $extract(record, 'shipToAddress.city') || '--' }}</p>
          </template>
        </a-table-column>
        <a-table-column title="物流渠道" :width="70">
          <template #cell="{ record }">
            <p>{{ $extract(record.logisticsInfo, 'logisticChannelName') }}</p>
          </template>
        </a-table-column>
        <a-table-column title="承运商/跟踪号" :width="100">
          <template #cell="{ record }">
            <template v-if="$extract(record.logisticsInfo, 'logisticName') && $extract(record.logisticsInfo, 'logisticsTrackNumber')">
              <p>{{ $extract(record.logisticsInfo, 'logisticName') }}</p>
              <TextLimit :rows="1">{{ $extract(record.logisticsInfo, 'logisticsTrackNumber') }}</TextLimit>
            </template>
            <p v-else class="warningColor">无法发货</p>
          </template>
        </a-table-column>
        <a-table-column title="装箱数" :width="70">
          <template #cell="{ record }">
            <p>{{ record.boxDetails.length }}</p>
          </template>
        </a-table-column>
        <a-table-column title="重量(kg/lb)" :width="100">
          <template #cell="{ record }">
            <p>{{ getWeight(record.boxDetails, 'weight') }}</p>
            <p>{{ getWeight(record.boxDetails, 'weight2') }}</p>
          </template>
        </a-table-column>
        <a-table-column title="预估运费" :width="80">
          <template #cell="{ record }">
            <p>￥{{ record.shipFee }}</p>
          </template>
        </a-table-column>
        <a-table-column title="操作" :width="70" fixed="right">
          <template #cell="{ rowIndex }">
            <a-popconfirm v-if="fbaOrders.length > 1" content="确定是否移除?" @ok="fbaOrders.splice(rowIndex, 1)" type="error">
              <a-button type="text">移除</a-button>
            </a-popconfirm>
          </template>
        </a-table-column>
      </template>
    </a-table>
  </a-modal>
</template>
<script lang="ts" setup>
  import { ref, onMounted, PropType } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { confirmFbaShipmentShipByStore, confirmFbaShipmentShipBySale } from '@/api/purchase'
  import { marketPlaceList } from '@/utils/globalData'

  onMounted(async () => {})
  const emit = defineEmits(['closed', 'success'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array as PropType<Array<any>>,
      default: () => [],
    },
    source: {
      type: String,
      default: 'store',
    },
  })

  const showFbaShipment = ref(props.isShow)
  const fbaOrders = ref<Array<any>>(JSON.parse(JSON.stringify(props.list)))
  const submitLoading = ref(false)

  //显示重量
  function getWeight(boxDetails: any, key: string) {
    if (!boxDetails.length) return
    let num = 0
    boxDetails.forEach((el: any) => {
      num += Number(el[key] || 0)
    })
    return num
  }

  // 关闭
  function closedDialog() {
    showFbaShipment.value = false
    emit('closed')
  }

  // 校验必填信息
  function validateData() {
    let flag = true
    fbaOrders.value.forEach((el: any) => {
      if (!el.logisticsInfo?.logisticName || !el.logisticsInfo?.logisticsTrackNumber) {
        flag = false
      }
    })
    if (!flag) {
      Message.error('缺少跟踪号无法发货')
      return false
    }
    return true
  }
  // 保存
  async function submitData() {
    if (!validateData()) return false
    let apiMethod = props.source == 'store' ? confirmFbaShipmentShipByStore : confirmFbaShipmentShipBySale
    let res: any = await apiMethod({
      ids: fbaOrders.value.map((el: any) => el.id),
    })
    if (!res) return false
    Message.success('发货成功')
    emit('success')
    closedDialog()
  }
</script>
<style lang="less" scoped>
  .logistic-w {
    margin: 10px 0;
    border: 1px solid #ddd;
    padding: 10px;
    .arco-form-item {
      margin-bottom: 0;
    }
  }
</style>
